<script setup>
defineProps({
  goods: {
    type: Object,
    required: true,
  },
});
</script>

<template>
  <li class="hh">
    <router-link :to="`/detail/${goods.id}`">
      <img :src="goods.picture" alt="" />
      <p class="name">{{ goods.name }}</p>
      <p class="desc">{{ goods.desc }}</p>
      <p class="price"><i>￥</i>{{ goods.price }}</p>
    </router-link>
    <slot name="flex"></slot>
  </li>
</template>
<style lang="scss" scoped>
li {
  height: 300px;
  width: 240px;
  position: relative;
  overflow: hidden;

  padding: 10px 20px;
  img {
    width: 180px;
    height: 180px;
    margin: 0;
    text-align: center;
    align-items: center;
  }
  p {
    height: 40px;
    text-align: left;
    align-items: center;
  }
  .name {
    color: black;
    font-size: 16px;
  }
  .desc {
    color: rgb(132, 132, 132);
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    height: 38px;
  }
  .price {
    font-size: 24px;
    color: brown;
  }
}
</style>
